<!--
 * @Description: 邀请好友预警设置弹窗
 * @Author: liyujie
 * @Date: 2021/07/19
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/19
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="预警设置"
            :visible.sync="dialogVisible"
            width="900px"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <div class="filter-view">
                    <span style="margin-right: 12px">年度</span>
                    <el-select
                        v-model="filterData.year"
                        size="medium"
                        style="width: 152px"
                        @change="getTableData"
                    >
                        <el-option
                            v-for="item in yearList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="set-view">
                    <div class="set-item">
                        设置今日预警金额：
                        <div class="right">
                            <span style="color: #FF8E39">{{ budget.budget_today ? budget.budget_today : '--' }}</span>
                            <el-button
                                type="text"
                                style="margin-left: 4px"
                                @click="showInputDialog({budget: budget.budget_today}, 2)"
                            >
                                编辑
                            </el-button>
                        </div>
                    </div>
                    <div class="set-item">
                        设置明日预警金额：
                        <div class="right">
                            <span style="color: #FF8E39">{{ budget.budget_tomorrow ? budget.budget_tomorrow : '--' }}</span>
                            <el-button
                                type="text"
                                style="margin-left: 4px"
                                @click="showInputDialog({budget: budget.budget_tomorrow}, 3)"
                            >
                                编辑
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="table-view">
                    <el-table
                        :data="tableData.slice(0, 6)"
                        height="384"
                        class="data-table"
                        style="margin-right: 24px"
                        :cell-style="{height: '46px'}"
                    >
                        <el-table-column
                            label="月份"
                            align="center"
                            width="80"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.month_only }}月
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="budget"
                            label="月度预警金额(元)"
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="操作"
                            width="130"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    :disabled="isExpire(scope.row.month_only)"
                                    @click="showInputDialog(scope.row, 1)"
                                >
                                    {{ scope.row.status ? '修改' : '设置' }}
                                </el-button>
                                <el-popover
                                    placement="bottom"
                                    width="480"
                                    trigger="click"
                                    style="margin-left: 10px"
                                    popper-class="peak-setting-dialog-popper"
                                >
                                    <div class="title">操作记录</div>
                                    <div class="record-list">
                                        <div
                                            class="record-item"
                                            v-for="(item, index) in record_list"
                                            :key="index"
                                        >
                                            <div class="record-time">{{ item.history_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}</div>
                                            <div class="record-desc">
                                                月度预警金额{{ item.type === 1 ? '设置' : '修改' }}为<span style="color: #F79038">{{ item.budget_new }}元</span>
                                            </div>
                                        </div>
                                    </div>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        :disabled="!scope.row.status"
                                        @click="getRecordList(scope.row)"
                                    >
                                        操作记录
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table
                        :data="tableData.slice(6, 12)"
                        height="384"
                        class="data-table"
                        :cell-style="{height: '46px'}"
                    >
                        <el-table-column
                            label="月份"
                            align="center"
                            width="80"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.month_only }}月
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="budget"
                            label="月度预警金额(元)"
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="操作"
                            width="130"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    :disabled="isExpire(scope.row.month_only)"
                                    @click="showInputDialog(scope.row, 1)"
                                >
                                    {{ scope.row.status ? '修改' : '设置' }}
                                </el-button>
                                <el-popover
                                    placement="bottom"
                                    width="540"
                                    trigger="click"
                                    style="margin-left: 10px"
                                    popper-class="peak-setting-dialog-popper"
                                >
                                    <div class="title">操作记录</div>
                                    <div class="record-list">
                                        <div
                                            class="record-item"
                                            v-for="(item, index) in record_list"
                                            :key="index"
                                        >
                                            <div class="record-time">{{ item.history_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}</div>
                                            <div class="record-desc">
                                                月度预警金额{{ item.type === 1 ? '设置' : '修改' }}为<span style="color: #F79038">{{ item.budget_new }}元</span>
                                            </div>
                                        </div>
                                    </div>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        :disabled="!scope.row.status"
                                        @click="getRecordList(scope.row)"
                                    >
                                        操作记录
                                    </el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    style="width: 120px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 52px"
                    @click="dialogVisible = false"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
        <el-dialog
            :title="type === 1 ? '设置月度预警金额' : '设置预警'"
            :visible.sync="inputDialog"
            width="640px"
            :close-on-click-modal="false"
            @close="ruleForm.budget = ''"
        >
            <div class="input-wrapper">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    @submit.native.prevent
                >
                    <el-form-item
                        :label="type === 1 ? '月度预警金额设置' : '预警金额设置'"
                        prop="budget"
                    >
                        <el-input
                            v-model="ruleForm.budget"
                            size="medium"
                            clearable
                            :placeholder="type === 1 ? '请输入月度预警金额' : '请输入预警金额'"
                            @keydown.enter.native="setBudget(setRow, type)"
                        >
                            <span
                                slot="suffix"
                                style="margin-right: 6px"
                            >元</span>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div
                class="dialog-footer"
                style="padding-top: 12px"
            >
                <el-button
                    size="medium"
                    style="width: 100px"
                    @click="inputDialog = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 100px;margin-left: 52px"
                    :disabled="!ruleForm.budget"
                    @click="setBudget(setRow, type)"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: "PeakSettingDialog",
    data() {
        return {
            dialogVisible: false,
            inputDialog: false,
            filterData: {
                year: new Date().getFullYear()
            },
            tableData: [],
            record_list: [],
            yearList: [
                {label: '2021', value: 2021},
                {label: '2022', value: 2022},
                {label: '2023', value: 2023},
                {label: '2024', value: 2024},
                {label: '2025', value: 2025},
            ],
            budget: {
                budget_today: 0,
                budget_tomorrow: 0,
            },
            setRow: {},
            type: 1,
            ruleForm: {
                budget: ''
            },
            rules: {
                budget: [
                    {required: true, message: '请输入月度预警金额', trigger: 'blur'},
                    {pattern: /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/, message: '预警金额必须为数字', trigger: 'blur'},
                ]
            }
        };
    },

    computed: {
        isExpire() {
            return (val) => {
                let nowMonth = new Date().getMonth() + 1;
                let nowYear = new Date().getFullYear();
                let year = this.filterData.year;

                return year <= nowYear && val < nowMonth;
            };
        }
    },

    methods: {
        /**
         * 显示弹窗
         */
        show() {
            this.dialogVisible = true;
            this.getTableData();
            this.getBudgetConfig();
        },

        /**
         * 获取数据
         */
        getTableData() {
            this.$post('/student/task_stuagent_extra_student_invite_config%5Cget_month_limit_list', {...this.filterData}, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 获取今日明日预算
         */
        getBudgetConfig() {
            this.$post('/student/task_stuagent_extra_student_invite_config%5Cget_config', {}, res => {
                if (res.code === 1) {
                    this.budget = res.data;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '/';
            return val;
        },

        /**
         * 显示输入弹窗
         * @param row
         * @param type 设置类型 1设置月份 2设置当天 3设置明天
         */
        showInputDialog(row, type) {
            this.setRow = row;
            this.type = type;
            this.ruleForm.budget = row.budget;
            this.inputDialog = true;
        },

        /**
         * 设置预算
         * @param row
         * @param type 设置类型 1设置月份 2设置当天 3设置明天
         */
        setBudget(row, type) {
            this.$refs['ruleForm'].validate((valid) => {
                if(valid) {
                    // 设置月份
                    if(type === 1) {
                        if(Number(this.ruleForm.budget) < row.budget_cost) {
                            this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: '当前设置金额低于实际支出金额，保存失败'
                            });
                            return;
                        }
                        let params = {
                            month: row.month,
                            budget: this.ruleForm.budget
                        };

                        this.$post('/student/task_stuagent_extra_student_invite_config%5Cset_month_limit', params, res => {
                            if (res.code === 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '设置成功',
                                    type: 'success'
                                });
                                this.inputDialog = false;
                                this.getTableData();
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    }

                    // 设置当天或者明天
                    if(type === 2 || type === 3) {
                        this.$post('/student/task_stuagent_extra_student_invite_config%5Cset_config', {
                            budget_today: type === 2 ? this.ruleForm.budget : this.budget.budget_today,
                            budget_tomorrow: type === 3 ? this.ruleForm.budget : this.budget.budget_tomorrow
                        }, res => {
                            if (res.code === 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '设置成功',
                                    type: 'success'
                                });
                                this.inputDialog = false;
                                this.getBudgetConfig();
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    }
                }
            });
        },

        /**
         * 获取操作记录
         * @param row
         */
        getRecordList(row) {
            this.$post('/student/task_stuagent_extra_student_invite_config%5Cget_month_limit_history_list', {month: row.month}, res => {
                if (res.code === 1) {
                    this.record_list = res.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .el-button--text {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #20A0FF;
    }
    .set-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 24px 0 16px;
        .set-item {
            height: 42px;
            background: #EBF5FF;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 24px;
            flex: 1;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            &:first-of-type {
                margin-right: 24px;
            }
        }
    }
    .table-view {
        display: flex;
        margin: 24px 0 32px 0;
        /deep/ .el-table {
            border: 1px solid #eee;
            border-radius: 4px;
            th {
                background: #f2f2f2!important;
                font-size: 14px!important;
                font-family: PingFangSC-Medium, PingFang SC!important;
                font-weight: 500!important;
                color: #333333!important;
            }
            td {
                background: #FBFBFB!important;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }
        }
        .el-button.is-disabled {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
    .input-wrapper {
        padding: 0 32px;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
</style>
<style lang="less">
.peak-setting-dialog-popper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .record-list {
        padding: 12px 32px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #EEEEEE;
        display: flex;
        flex-direction: column;
        margin-top: 16px;
        max-height: 200px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
        .record-item {
            display: flex;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            margin: 12px 0;
            .record-time {
                margin-right: 24px;
            }
        }
    }
}
</style>
